<template>
  <div class="components-header">
    <div class="flow-title">
      <div class="flow-title-left">
        <div class="line" />
        <div class="text">
          {{ $t('dataAnalysis.pVOverview') }}
        </div>
      </div>
      <div class="flow-title-right">
        <DateTypeSelect
          :date-options="dateOptions"
          :date-type="dateType"
          @date-change="onDateChange"
          @flush-time="onFlushTime"
        />

        <div
          v-if="isAuth('flow:data:export')"
          class="default-btn primary-btn export-btn"
          @click="exportCategory()"
        >
          {{ $t("order.export") }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Debounce } from '@/utils/debounce'
import DateTypeSelect from '../../components/date-type-select.vue'
import { ElLoading, ElMessage } from 'element-plus'
import { isAuth } from '@/utils'

const dateOptions = [
  {
    label: $t('dataAnalysis.naturalDay'),
    value: 1
  },
  {
    label: $t('dataAnalysis.naturalWeek'),
    value: 2
  },
  {
    label: $t('dataAnalysis.naturalMonth'),
    value: 3
  },
  {
    label: $t('dataAnalysis.todayRealTime'),
    value: 4
  },
  {
    label: $t('dataAnalysis.nearly7'),
    value: 5
  },
  {
    label: $t('dataAnalysis.nearly30'),
    value: 6
  },
  {
    label: $t('dataAnalysis.custom'),
    value: 7
  }
]

const emit = defineEmits(['dateChange'])

const dateType = ref(5)
const dateRange = ref([])
const onDateChange = (data) => {
  dateType.value = data.timeType
  dateRange.value = data.dateRange
  emit('dateChange', data)
}

// 刷新时间
const onFlushTime = () => {
  http({
    url: http.adornUrl('/platform/flowAnalysis/refresh'),
    method: 'get'
  })
}

// 导出
const exportCategory = Debounce(() => {
  const loading = ElLoading.service({
    lock: true,
    target: '.overview',
    customClass: 'export-load',
    background: 'transparent',
    text: $t('shop.exportIng')
  })
  http({
    url: http.adornUrl('/platform/flowAnalysis/analysisDataExport'),
    method: 'get',
    params: http.adornParams({
      timeType: dateType.value,
      start: new Date(dateRange.value[0].replace(/-/g, '/')).getTime(),
      end: new Date(dateRange.value[1].replace(/-/g, '/')).getTime()
    }),
    responseType: 'blob'
  }).then(({ data }) => {
    loading.close()
    const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
    const fileName = $t('dataAnalysis.pVOverview') + '.xlsx'
    const elink = document.createElement('a')
    if ('download' in elink) {
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
    } else {
      navigator.msSaveBlob(blob, fileName)
    }
    ElMessage({
      message: $t('shop.exportSuccess'),
      type: 'success',
      duration: 1500
    })
  }).catch(() => {
    loading.close()
  })
})

</script>

<style lang="scss" scoped>
.components-header {
  .flow-title {
    margin-top: 0;
  }
  .export-btn {
    margin-left: 20px;
  }
  :deep(.export-load) {
    top: -50% !important;
  }
}
</style>
